<template>
  <div  class="SHZY-common-layout">
    <div class="SHZY-common-layout-center">
      <el-row class="SHZY-common-search-box" :gutter="16">
        <el-form>
          <el-col :span="3">
            <el-form-item label="默认当前年">
              <el-date-picker
                type="year"
                v-model="dateyear"
                placeholder="选择日期"
                align="right"
                format="yyyy"
                value-format="yyyy"
                @change="yearchange(dateyear)"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="submit()">确认</el-button>
            </el-form-item>
          </el-col> -->
        </el-form>
      </el-row>
      <div class="SHZY-common-layout-main SHZY-flex-main">
        <div class="SHZY-common-head">
          <div>
            <el-radio-group
              style="width: 153px"
              v-model="activeIndex"
              size="medium"
            >
              <el-radio-button label="0" style="border: none"
                >表格</el-radio-button
              >
              <el-radio-button label="1" style="border: none"
                >折线图</el-radio-button
              >
              <!-- <el-radio-button label="2" style="border: none"
                >test折线图</el-radio-button
              > -->
            </el-radio-group>

            <el-button
              style="margin-left: 10px"
              type="primary"
              @click="Export()"
              >导出</el-button
            >
          </div>
        </div>

        <!-- <FormalTable v-if="activeIndex == 0" :father="father" /> -->
        <InFormalTable
          v-if="activeIndex == 0"
          ref="reftable"
          :year="this.dateyear"
          :problemAttribution="problemAttribution"
        />
        <InFormalEcharts
          v-if="activeIndex == 1"
          ref="refecharts"
          :year="this.dateyear"
          :problemAttribution="problemAttribution"
          :formalComplaintType="formalComplaintType"
          :informalComplaintType="informalComplaintType"
          :formaldata="formaldata"
          :informaldata="informaldata"
        />
        <TestEcharts v-if="activeIndex==2" ref="testecharts"/>
      </div>
    </div>
  </div>
</template>

<script>
// 引用 echarts
import * as echarts from "echarts";
import InFormalTable from "./informaltable.vue";
import InFormalEcharts from "./informalEcharts.vue";
import TestEcharts from "./testecharts.vue"
import formalcustomerapi from "@/api/report";
export default {
  components: { InFormalTable, InFormalEcharts,TestEcharts },
  // name: "myChart",
  data() {
    return {
      activeName: "second",
      activeIndex: 0,
      //传递给子组件的值
      dateyear: "",
      problemAttribution: "配件",
      formalComplaintType: "正式",
      informalComplaintType: "非正式",
      // father: "父值123",

      //向子组件传输的数据源
      formaldata: [],
      informaldata: [],
      tableDatelist: [],
    };
  },
  created() {
    this.getyear();
    // this.formalecharts();
    // this.informalecharts();
    //this.init();
  },
  mounted() {},
  methods: {
    init() {
      tableapi.getTable(this.dateyear, "整机").then((res) => {
        console.log("=============")
        console.log(res);
        this.tableDatelist = res.data;
        console.log(this.tableDatelist);
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getyear() {
      let date = new Date();
      var year = date.getFullYear().toString();
      this.dateyear = year;
      console.log(this.dateyear);
      console.log(year);
    },
    yearchange(dateyear) {
      console.log(dateyear);
      console.log("change事件触发");
      //1.触发之后获取表格数据源
      //2.向子组件中把数据传输过去series
      //change 触发之后调用子组件init方法
      console.log("activeIndex");
      console.log(this.activeIndex);
      if (this.activeIndex == 0) {
        this.$nextTick(() => {
          this.$refs.reftable.init(dateyear, this.problemAttribution);
        });
      } else {
        this.$nextTick(() => {
          this.$refs.refecharts.initecharts(
            this.dateyear,
            this.problemAttribution,
            this.formalComplaintType
          );
          this.$refs.refecharts.initecharts1(
            this.dateyear,
            this.problemAttribution,
            this.informalComplaintType
          );
        });
      }
    },
    Export() {
      //把导出按钮放出来，导出还没写
      if (this.activeIndex != 0) {
        this.$nextTick(() => {
          this.$refs.refecharts.exportecharts();
        });
      } else {
        formalcustomerapi
          .exportformalCustomer("配件", this.dateyear)
          .then((res) => {
            if (!res.data.url) return;
            this.shzy.downloadFile(res.data.url);
          });
      }
      //console.log("导出事件触发");
    },
  },
};
</script>

<style>
/* #mychart {
  width: 1000px;
  height: 500px;
  border: 1px solid red;
} */
.el-radio-button__inner {
  /* border: 0px; */
}
</style>
